<template>
  <div class="container">
     <el-row :gutter="20">
       <el-col :span="24">
          <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          class="marginBottom"
        >
          <el-table-column prop="shopName" label="店铺名称">
          </el-table-column>
          <el-table-column prop="address" label="店铺地址"> </el-table-column>
          <el-table-column prop="program" label="运行程序">
            <template slot-scope="scope">
                {{computedProgram(scope.row.program)}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态">
            <template slot-scope="scope">
                {{computedStatus(scope.row.status)}}
            </template>
          </el-table-column>

          <el-table-column prop="completeTime" label="完成时间"> </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
           <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
              <el-button
                size="mini"
                type="primary"
                @click="handleView(scope.$index, scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total"></el-pagination>
       </el-col>
     </el-row>
  </div>
</template>

<script>
import { getProgram, getStatus } from "@/utils/index";
import { getSimpleOrder } from "@/api/order/index";

export default {
  name: "order",
  data() {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
    };
  },
  methods: {
    computedProgram(value) {
      return getProgram(value);
    },
    computedStatus(value) {
      return getStatus(value);
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getData();
    },
    getData() {
      getSimpleOrder(this.queryParams)
        .then((result) => {
          const { data, total } = result;
          this.tableData = data;
          this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.total = 0;
          this.loading = false;
        });
    },
    handleView(index,row){
        this.$router.push({path:'/order/detail',query:{id:row.orderId}});
    }
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss">
</style>
